<template>
  <div class="container">
   <div class="sidebar" :class="{ 'active': isSidebarActive }">
     <!-- 分类导航栏内容 -->
     <ul :class="{ 'hide-list': !isSidebarActive }">
       <li class="category-item" v-for="category in categories" :key="category.id">
         <el-row>
         <el-button @click="kindsbuttonclick(category)" type="primary" round>{{ category.name }}</el-button>
         </el-row>
       </li>
     </ul>
   </div>
   <div class="main-content">
     <!-- 主要内容区域 -->
   </div>
 </div>
 <!-- video -->
 <div class="video-wrapper" ref="videoPlayer" @wheel="onWheel"></div>
 <!-- 收藏 -->
 <div class="startsave">
   
 </div>
 <!-- 点赞 -->
 <div class="bigrigth">
   
 </div>
</template>

<script>
import Hls from 'hls.js';
import DPlayer from 'dplayer';
import {getNewList,getListByKinds} from "@/api/http"
export default {
 name: 'VideoHLS',
 //data start
 data() {
   return {
     videoUrls: ['VedioPath1', 'VedioPath2', 'VedioPath3'],
     videoUrl: "http://127.0.0.1:8090/vistor/videos/river2.ts", // HLS 视频链接
     currentVideoIndex: 0,
     player: null,
     categories: [
       { id: 1, name: '最新' },
       { id: 2, name: '城市' },
       { id: 3, name: '海滩' },
       { id: 4, name: '河流' },
       { id: 5, name: '天空' },
       { id: 6, name: '星空' },
       // 添加更多分类...
     ],
     kindsval: 1,
   };
 },
 //data end
 //mount start
 mounted() {
   window.addEventListener('keydown', this.onKeyDown);
   const container = this.$refs.videoPlayer;
   // ...
   //player start
   this.player = new DPlayer({
     container,
     autoplay:false,
     video: {
        url: this.videoUrl,
        type: 'customHls',
        customType: {
          customHls: function(video, player) {
            const hls = new Hls();
            hls.loadSource(video.src);
            hls.attachMedia(video);
            player.options.autoplay = true;
            player.options.preload = 'auto';
         },
       },
     },
   });
   //player end
   this.player.play();
   console.log(this.player)
   getNewList().then(data =>{
      const videoPaths = Array.from(Object.values(data));
      console.log(videoPaths);
      
        //const videoPaths = data.data.map(item => item.v);
        //console.log(videoPaths);
      for (let i=0;i<videoPaths.length;i++){
        videoPaths[i]="http://127.0.0.1:8090/vistor/videos/"+videoPaths[i]
        console.log(videoPaths[i])
      }
      this.videoUrls=videoPaths;
      //this.videoUrl=videoPaths[0]
      this.player.switchVideo(
       {
         url: this.videoUrl,
         type: 'customHls',
         pic: 'second.png',
       thumbnails: 'second.jpg',
       },
     );
     this.player.play();
      });
 },
 //mount end
 beforeUnmount() {
   window.removeEventListener('keydown', this.onKeyDown);
 },
 //methods satrt
 methods: {
  
   //鼠标滑动事件监听start
  onWheel(event) {
     let code = 0
     const urls = this.videoUrls;
     const currentIndex = this.currentVideoIndex;
     console.log("usls"+urls.length)
     code=Number(code)
     // 滚轮事件处理逻辑
     const delta = Math.sign(event.deltaY);
     console.log(delta)
     // 根据滚轮滚动方向执行相应操作
     if (delta > 0 && currentIndex<urls.length-1) {
       // 向下滚动
       this.currentVideoIndex += 1;
       console.log("down ");
     } else if (delta < 0&&currentIndex>0) {
       // 向上滚动
       this.currentVideoIndex -= 1;
       console.log("up ");
     }else{
       console.log(code);
       return;
     }
     this.videoUrl = urls[this.currentVideoIndex];
     console.log(this.videoUrl);
     this.player.switchVideo(
       {
         url: this.videoUrl,
         type: 'customHls',
         pic: 'second.png',
         thumbnails: 'second.jpg',
       },
     );
     this.player.play();
   },
   //鼠标滑动事件监听end

   //视频分类start
   kindsbuttonclick(category) {
      if(category.id===this.kindsval){
        return
      }
      this.kindsval=category.id
      console.log("key:"+category.id+" "+category.name + ' button clicked!'+"  kindsval=>"+this.kindsval);
      if(category.id==1||category.id=='1'||category.id=="1"){
        getNewList().then(data =>{
      const videoPaths = Array.from(Object.values(data));
      console.log(videoPaths);
      
        //const videoPaths = data.data.map(item => item.v);
        //console.log(videoPaths);
      for (let i=0;i<videoPaths.length;i++){
        videoPaths[i]="http://127.0.0.1:8090/vistor/videos/"+videoPaths[i]
        console.log(videoPaths[i])
      }
      this.videoUrls=videoPaths;
      //this.videoUrl=videoPaths[0]
      this.player.switchVideo(
       {
         url: this.videoUrl,
         type: 'customHls',
      //    pic: 'second.png',
      //  thumbnails: 'second.jpg',
       },
     );
     this.player.play();
      });
      }
      else{
        getListByKinds(category.id).then(data =>{
      const videoPaths = Array.from(Object.values(data));
      console.log(videoPaths);
      
        //const videoPaths = data.data.map(item => item.v);
        //console.log(videoPaths);
      for (let i=0;i<videoPaths.length;i++){
        videoPaths[i]="http://127.0.0.1:8090/vistor/videos/"+videoPaths[i]
        console.log(videoPaths[i])
      }
      this.videoUrls=videoPaths;
      //this.videoUrl=videoPaths[0]
      this.player.switchVideo(
       {
         url: this.videoUrl,
         type: 'customHls',
      //    pic: 'second.png',
      //  thumbnails: 'second.jpg',
       },
     );
     this.player.play();
      });
      }
   }
   //视频分类end
 },
 //methods end
};
</script>

<style scoped>
body{
 overflow: hidden;
}
.dplayer-video-wrap video {
 object-fit: contain;
}
.video-wrapper {
 width: 70%; /* 设置宽度为屏幕宽度的70% */
 height: 80%; /* 设置高度为屏幕高度的80% */
 display: flex;
 align-items: center; /* 在垂直方向上居中 */
 justify-content: center; /* 在水平方向上居中 */
 margin-top:-5%;
}
.container {
 display: flex;
 margin-top: calc(-53vh - 0px);
 margin-left: calc(-10vh - 0px);
}

.sidebar {
 width: 130px;
 background-color: #ffffff;
 transition: transform 0.3s ease-in-out; 
}

.sidebar.active {
 transform: none;
}

.main-content {
 flex: 1;
 background-color: #ffffff;
}
.hide-list {
 list-style-type: none;
}
.category-item {
 margin-bottom: 15px;
}
</style>

